<template>
    <div class="sub-title">
        <img src="./img/arrow.png" alt="" />
        <span>{{ titleText }}</span>
    </div>
</template>

<script>
import { reactive } from 'vue'

export default {
    name: 'SubTitle',
    props: {
        width: {
            type: Number,
            default: 346
        },
        titleText: {
            type: String,
            default: '默认标题'
        }
    },
    setup(props) {
        const self = reactive({})
        return {
            props
        }
    }
}
</script>

<style scoped lang="scss">
.sub-title {
    width: v-bind('props.width');
    height: 36px;
    background-size: 100% 100%;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    align-items: center;
    img {
        width: 16px;
        height: 16px;
        margin-right: 10px;
    }
    span {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 1px;
        font-weight: 400;
        text-align: left;
    }
}
</style>
